blob: b8fa5b4f98cc1e0d530a193d10dec6ffb932272e (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
---
import { getCollection } from "astro:content";
import Terminal from "@layouts/Terminal.astro";
import BlogItem from "@components/BlogItem.astro";
import Link from "@components/Link.astro";
import TerminalBorder from "@components/TerminalBorder.astro";
export async function getStaticPaths() {
const blogEntries = await getCollection("blogs");
return blogEntries.map((entry) => ({
params: { slug: entry.slug },
props: { entry },
}));
}
const { entry } = Astro.props;
const { Content } = await entry.render();
---
<Terminal path="blogs/">
<div class="w-full h-[65vh] overflow-y-auto pr-4 border-box">
<div class="text-[130%] h-full">
<div class="text-[110%]">
<BlogItem
title={entry.data.title}
description={entry.data.description ?? ""}
date={entry.data.date}
/>
</div>
<div class="markdown">
<Content components={{ a: Link }} />
</div>
<div class="ml-[1px] pt-2 grid grid-cols-[1fr_1fr] gap-4">
<div class="min-w-0 invisible"></div>
<TerminalBorder header="Previous Blog">
<Link href="next" newTab={false}
>vim ~/blogs/next-blog.md</Link
>
</TerminalBorder>
<TerminalBorder header="Next Blog">
<Link href="next" newTab={false}
>vim ~/blogs/next-blog.md</Link
>
</TerminalBorder>
</div>
</div>
</div>
</Terminal>
<style is:global>
.markdown {
user-select: text;
}
.markdown a {
display: inline-block;
font-weight: normal;
}
.markdown code {
background: #333333;
color: var(--accent);
padding: 0 0.5rem;
}
.markdown ul {
list-style-type: square;
margin-left: 1rem;
margin-bottom: 1rem;
font-size: 90%;
}
.markdown li {
margin-bottom: 0.5rem;
}
.markdown p {
margin-bottom: 1rem;
user-select: text;
}
.markdown strong {
font-weight: bold;
}
.markdown h2 {
color: var(--secondary);
font-size: 125%;
margin-bottom: 0.5rem;
}
.markdown h3 {
color: var(--secondary);
font-size: 110%;
margin-bottom: 0.25rem;
}
.expressive-code {
margin-bottom: 1rem;
}
</style>
|
